/* 全局样式 */
* {
  box-sizing: border-box;
}

:root {
  /* 主色调 - 改进的蓝色，提高可读性 */
  --color-primary: #165DFF;
  --color-primary-hover: #3C7EFF;
  --color-primary-active: #0E42D2;
  
  /* 辅助色 - 增强对比度 */
  --color-success: #00B42A;
  --color-warning: #FF7D00;
  --color-error: #F53F3F;
  
  /* 中性色 - 改进的灰度系统 */
  --color-text-1: #1D2129;    /* 主要文字颜色 */
  --color-text-2: #4E5969;    /* 次要文字颜色 */
  --color-text-3: #86909C;    /* 辅助文字颜色 */
  --color-text-4: #C9CDD4;    /* 弱文字颜色 */
  
  --color-border-1: #E5E6EB;  /* 一级边框 */
  --color-border-2: #F2F3F5;  /* 二级边框 */
  
  --color-bg-1: #FFFFFF;      /* 一级背景 */
  --color-bg-2: #F7F8FA;      /* 二级背景 */
  --color-bg-3: #F2F3F5;      /* 三级背景 */
  --color-bg-4: #EBEDF0;      /* 四级背景 */
  
  /* 字体 */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  
  /* 圆角 */
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  
  /* 阴影 */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.16);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-size: var(--font-size-md);
  color: var(--color-text-1);
  background-color: var(--color-bg-1);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 动画效果 */
.fade-enter {
  opacity: 0;
  transform: translateX(30px);
}

.fade-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 300ms, transform 300ms;
}

/* 卡片悬停效果 */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

/* 按钮动画 */
.arco-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.arco-btn:hover {
  transform: translateY(-2px);
}

/* 菜单项动画 */
.arco-menu-item {
  transition: all 0.2s ease;
}

.arco-menu-item:hover {
  transform: translateX(4px);
}

/* 统计数字动画 */
.statistic-number {
  transition: all 0.5s ease;
}

/* 加载动画 */
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.pulse-animation {
  animation: pulse 2s infinite;
}

/* 滑入动画 */
@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in-up {
  animation: slideInUp 0.4s ease-out forwards;
}

/* 弹跳动画 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.bounce-animation {
  animation: bounce 1s ease;
}